<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>  
    .axis path,  
    .axis line{  
        fill:none;  
        stroke:black;  
        shape-rendering:crispEdges;  
    }  
    .legendtext{
    	font-size:7px;
    }
    
</style> 
</head>
<body>
<h1>${dataset.datasetName}</h1>
</body>
<script>
!function(w){
	var width = 800;  
	var height = 600;  
	var dataset=[  
			<#list dataset as line>
	{
				name:'${line.name}',
				value:[
					<#list line.value as point>
						[${point.x},${point.y}],
					</#list>
				],
				type:'${line.type}'
	},
			</#list>
	];  
	var padding={top:70, right:70, bottom: 70, left:70};  
	var maxVal = 0;  
	var minVal = 100000;
	for(var i=0;i<dataset.length;i++){  
	    var curMax=d3.max(dataset[i].value,function(d){  
	        return d[1];  
	    }); 
	   	var curMin = d3.min(dataset[i].value,function(d){  
	        return d[1];  
	    }); 
	    if(curMax>maxVal)  
	    	maxVal = curMax;  
	    if(curMin<minVal)
	    	minVal = curMin;
	}  
	var xScale=d3.scale.linear().domain([0,dataset[0].value.length]).range([0,width-padding.left-padding.right]);  
	var yScale=d3.scale.linear().domain([minVal*1.1,maxVal*1.1]).range([height-padding.bottom-padding.top,0]);  
	var linePath=d3.svg.line()//创建一个直线生成器  
	                .x(function(d){  
	                    return xScale(d[0]);  
	                }).y(function(d){  
	                    return yScale(d[1]);  
	                }).interpolate("basis");//插值模式  
	//类标取值有多少就生成几种颜色,颜色可能相近,刷新下浏览器就好                
	var colors = Array.apply(null, Array(${dataset.numClass})).map(function(item, i) {
		return d3.rgb(parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255));
	});
	var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);  
	svg.selectAll("path").data(dataset).enter().append("path").attr("transform","translate("+padding.left+","+padding.top+")")  
	    .attr("d",function(d){  
	        return linePath(d.value);  
	    }).attr("fill","none")  
	    .attr("stroke-width",1)  
	    .attr("stroke",function(d,i){ 
	    	return colors[parseInt(d.type)];
	    });  
	var xAxis=d3.svg.axis().scale(xScale).ticks(5).tickFormat(d3.format("d")).orient("bottom");  
	var yAxis=d3.svg.axis().scale(yScale).orient("left");  
	//添加一个g用于放x轴  
	svg.append("g")  
	    .attr("class","axis")  
	    .attr("transform","translate("+padding.left+","+(height-padding.top)+")")  
	    .call(xAxis);  
	svg.append("g")  
	    .attr("class","axis")  
	    .attr("transform","translate("+padding.left+","+padding.top+")")  
	    .call(yAxis); 
	    var legendRect = {
	    		x:0,
	    		y:0,
	    		width:16,
	    		height:6,
	    }
		renderLegend();
		function renderLegend(){  
	        var legend = svg.selectAll(".legend")  
	            .data(colors)  
	            .enter()  
	            .append("g")  
	            .attr("class", "legend")  
	            .attr("transform", function(d, i) {  
	                var legendX = padding.left + 30;   //set position for each legend element  
	                var legendY = padding.bottom + i *10 ;  
	                return "translate(" + legendX + ", " + legendY + ")";  
	            });
	            //颜色块
	            legend.append("rect")
	            .attr("x", legendRect.x)  
	            .attr("y", legendRect.y)  
	            .attr("width", legendRect.width)  
	            .attr("height", legendRect.height)  
	            .style("fill", function(d,i){
	            	return colors[i];
	            })
	            //说明
	            legend.append("text")
	/*             .attr("transform", function(d, i) {  
	                var legendX = 0;   //set position for each legend element  
	                var legendY = 0;  
	                return "translate(" + legendX + ", " + legendY + ")";  
	            }) */

	            .attr("x", legendRect.width)  
	            .attr("y", legendRect.height)
	            .classed("legendtext", true)
	            .attr("stroke",function(d,i){return colors[i];})
	            .text(function(d,i) {  
	                return "class"+i;  
	            });;  
	          
	/*         legend.append("rect")  
	            .attr("x", 0)  
	            .attr("y", 1)  
	            .attr("width", 16)  
	            .attr("height", 8)  
	            .style("fill", _colors);  
	          
	        legend.append("text")  
	            .attr("x", 20)  
	            .attr("y", 9)  
	            .classed("legendtext", true)  
	            .text(function(d) {  
	                return d;  
	            });   */ 
	    } 
}(window);
</script>
</html>